import React, { useState, useEffect } from 'react';
import { getLibvirtImages } from '../api/virtApi';

interface DiskInfo {
  name: string;
  path: string;
  size: number;
  format: string;
  virtual_size: number;
  actual_size: number;
  has_backing_file: boolean;
}

const SomeDiskSelectionComponent: React.FC = () => {
  const [images, setImages] = useState<DiskInfo[]>([]);
  const [selectedImage, setSelectedImage] = useState<DiskInfo | null>(null);

  useEffect(() => {
    const fetchImages = async () => {
      try {
        const fetchedImages = await getLibvirtImages();
        setImages(fetchedImages);
      } catch (error) {
        console.error('获取镜像列表时出错:', error);
      }
    };

    fetchImages();
  }, []);

  const handleImageSelect = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const selectedValue = event.target.value;
    const selected = images.find(image => image.path === selectedValue);
    setSelectedImage(selected || null);
  };

  const handleSaveDiskInfo = () => {
    if (selectedImage) {
      // 这里实现将磁盘信息写入到第一项的逻辑
      // 假设我们有一个 state 来存储磁盘信息列表
      // 这里简单示例为 console.log 输出
      console.log('将磁盘信息写入到第一项:', selectedImage);
    }
  };

  return (
    <div>
      <select onChange={handleImageSelect}>
        <option value="">选择镜像</option>
        {images.map(image => (
          <option key={image.path} value={image.path}>
            {image.name}
          </option>
        ))}
      </select>
      <button onClick={handleSaveDiskInfo}>保存磁盘信息</button>
    </div>
  );
};

export default SomeDiskSelectionComponent;
